<template>
 <div class="main" v-loading="loading">
  <h6>{{ $t('convert.buy.title1') }}</h6>

  <div class="tips">
   <p>{{ $t('convert.buy.available') }} 0 USDT</p>
   <p>{{ $t('convert.buy.pay') }}</p>
  </div>

  <div class="input-box">
   <div class="name select">
    <img :src="icon1" alt="">

    <el-dropdown>
     <p class="el-dropdown-link">
      {{ ruleForm.coinCodeFrom }}<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
     </p>
     <el-dropdown-menu slot="dropdown">
      <el-dropdown-item @click.native="onChange(item, 1)" v-for="(item, index) of list" :key="index">{{ item.coin }}</el-dropdown-item>
     </el-dropdown-menu>
    </el-dropdown>
   </div>

   <input type="text" v-model="ruleForm.amountFrom" @input="coinCodeFrom" :placeholder="$t('common.error.t16')">
  </div>

  <div class="line">
   <p><i class="el-icon-sort"></i></p>
  </div>

  <div class="tips">
   <p class="info font-new">{{ $t('convert.buy.available') }} 0 USDT</p>
   <p>{{ $t('convert.buy.receive') }}</p>
  </div>

  <div class="input-box line-input">
   <div class="name select">
    <img :src="icon2" alt="">
    CTB
<!--    <el-dropdown>
     <p class="el-dropdown-link">
      {{ ruleForm.coinCodeTo }}<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
     </p>
     <el-dropdown-menu slot="dropdown">
      <el-dropdown-item @click.native="onChange(item, 2)" v-for="(item, index) of list" :key="index">{{ item.coin }}</el-dropdown-item>
     </el-dropdown-menu>
    </el-dropdown>-->
   </div>

   <input type="text" v-model="ruleForm.amountTo" @input="coinCodeTo" :placeholder="$t('common.error.t16')">
  </div>

  <el-button @click="covert">{{ $t('convert.buy.title1') }}</el-button>

  <p>1 {{ ruleForm.coinCodeFrom }} ≈ {{ rate }} CTB</p>
 </div>
</template>

<script>
export default {
 name: "Buy",
 data: () => ({
  icon1: '',
  icon2: require('@/assets/CTB.png'),
  list: [],

  icon: {
   BTC: require('@/assets/BTC.jpg'),
   ETH: require('@/assets/ETH.jpg'),
   USDT: require('@/assets/USDT.jpg'),
  },

  loading: false,

  ruleForm: {
   coinCodeFrom: 'CTB',
   amountFrom: '',
   amountTo: '',
   coinCodeTo: 'CTB',
  },

  rate: '',
  rateList: []
 }),
 created() {
  this.currency();

  this.coins()
 },
 methods: {
  // 币种列表
  currency () {
   this.$post(this.$address.coinList).then(res => {
    if (res.code === 1) {
     this.list = res.data
     this.ruleForm.coinCodeFrom = res.data[0].coin
     this.icon1 = this.icon[res.data[0].coin]
    }
   })
  },

  // 币种1兑换币种2
  coinCodeFrom(e) {
   this.rateList.forEach(item => {
    if (item.baseCoinsCode === this.ruleForm.coinCodeFrom) {
     this.ruleForm.amountTo = (this.ruleForm.amountFrom * item.buyPrice).toFixed(2)
    }
   })
  },

  // 币种2兑换币种1
  coinCodeTo() {
   this.rateList.forEach(item => {
    if (item.baseCoinsCode === this.ruleForm.coinCodeFrom) {
     this.ruleForm.amountFrom = (this.ruleForm.amountTo / item.buyPrice).toFixed(2)
    }
   })
  },

  // 获取币种交易对
  coins () {
   this.$post(this.$address.flash).then(res => {
    if (res.code === 1) {
     this.rateList = res.data;
     this.rate = res.data[0].buyPrice
    }
   })
  },

  // 选择币种
  onChange(index, e) {
   this.ruleForm.coinCodeFrom = index.coin;
   this.icon1 =  this.icon[index.coin];
   this.rateList.forEach(item => {
    if (index.coin === item.baseCoinsCode) {
     this.rate = item.buyPrice
     this.ruleForm.amountTo = (this.ruleForm.amountFrom * item.buyPrice).toFixed(2)
    }
   })
  },

  // 兑换
  covert () {
   if (this.ruleForm.amountFrom === '' || this.ruleForm.amountTo === '') {
    this.$message.error(this.$t('common.error.t17'))
   } else {
    this.loading = true
    this.$post(this.$address.coins, {
     data: this.ruleForm
    }).then(res => {
     this.loading = false
     if (res.code === 0) {
      this.ruleForm.amountTo = ''
      this.ruleForm.amountFrom = ''
      this.$message.success(this.$t('common.success.t9'))
     }
    })
   }
  }
 },
 watch: {
  'ruleForm.amount1' (a, b) {
   this.ruleForm.amount2 = a;
  },
  'ruleForm.amount2' (a, b) {
   this.ruleForm.amount1 = a;
  }
 }
}
</script>

<style scoped lang="scss">
.main {
 >h6 {
  padding-bottom: 30px;
  text-align: left;
  font-size: 20px;
  color: #040404;
 }
 .tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #9496a1;
  padding-bottom: 8px;

  .info {
   font-size: 14px;
   color: #9496a1;
  }

  p {
   &:nth-of-type(2) {
    font-size: 16px;
    color: #9496a1;
   }
  }
 }

 .input-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  &.line-input {
   border-bottom: 1px solid #BCCFE8;
   margin-bottom: 40px;
  }

  .select {
   display: flex;
   align-items: center;
   cursor: pointer;
   font-weight: bold;
   font-size: 17px;

   .el-dropdown {
    font-weight: bold;
    font-size: 17px;

    /deep/ .el-dropdown-link {
     i {
      margin-left: 10px;
      color: #c0c4cc;
     }
    }
   }
  }

  input {
   width: 1%;
   flex: 1 1 auto;
   text-align: right;
   padding-left: 10px;
   font-size: 16px;
   height: 44px;
   line-height: 44px;
   background-color: #fff;
   outline: none;
   border: 0;
   color: #000;

   &::-webkit-input-placeholder {
    color: #ccc;
    font-weight: bold;
   }
  }

  img {
   width: 40px;
   margin-right: 10px;
  }
 }

 .line {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 60px;
  box-sizing: content-box;

  p {
   position: absolute;
   left: 50%;
   width: 36px;
   height: 36px;
   transform: translateX(-50%);
   padding: 2px;
   border: 1px solid #b3bdc7;
   border-radius: 100px;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;

   i {
    background-color: #0D4FA5;
    width: 30px;
    height: 30px;
    font-size: 18px;
    color: #ffffff;
    border-radius: 100%;
    text-align: center;
    line-height: 30px;
   }
  }

  &:before {
   display: block;
   height: 1px;
   width: 100%;
   content: '';
   background-color: #BCCFE8;
  }
 }

 .el-button {
  width: 100%;
  height: 50px;
  display: block;
  font-size: 20px;
  cursor: pointer;
  border-radius: 2px;
  color: #0D4FA5;
  border: 1px solid #0D4FA5;
  background-color: #fff;
  transition: .3s;

  &:hover {
   background-color: #0D4FA5;
   color: #ffffff;
   transition: .3s;
  }
 }

 >p {
  text-align: left;
  color: #9496a1;
  width: 100%;
  padding-top: 20px;
 }
}
</style>
